<template>
  <div class="fm">
    <div class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
        <el-breadcrumb-item>领养列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="flex justify-space-between mb-4 flex-wrap gap-4" style="margin-right: 16rem">
        <el-button
          v-for="button in buttons"
          :key="button.text"
          :type="button.type"
          link
          @click="button.method"
          >{{ button.text }}</el-button
        >
      </div>
    </div>
    <!-- 筛选 -->
    <div class="select" ref="select">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="宠物名字">
              <el-input v-model="formInline.name" placeholder="宠物名字" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input v-model="formInline.age" type="number" placeholder="年龄" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性格">
              <el-input v-model="formInline.personality" placeholder="性格" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="8">
            <el-form-item label="品种">
              <el-input v-model="formInline.variety" placeholder="品种" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="健康情况">
              <el-input v-model="formInline.health" placeholder="健康情况" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="领养地址">
              <el-input v-model="formInline.address" placeholder="领养地址" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="formSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="pets" style="width: 100%; border-radius: 6rem" @row-click="dialogTable">
      <el-table-column fixed prop="name" size="big" label="名字" width="200" />
      <el-table-column prop="age" label="年龄" width="200" />
      <el-table-column prop="variety" label="品种" width="200" />
      <el-table-column prop="address" label="地址" width="400" />
      <el-table-column prop="resource" label="状态" width="200" />
      <el-table-column prop="time" label="更新时间" width="400" />
      <el-table-column fixed="right" label="操作" width="150" class="cz" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.stop="deletePet(scope.row._id)"
            ><el-icon size="14rem"><Delete /></el-icon
          ></el-button>
          <el-button link type="primary" size="small" @click.stop="updatePet(scope.row._id)"
            ><el-icon size="14rem"><Edit /></el-icon
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="8"
        v-model="current"
      />
    </div>
    <!-- 详情 -->
    <el-dialog v-model="dialogTableVisible" title="宠物详情">
      <PetsDialog :filterPet="filterPet"></PetsDialog>
    </el-dialog>
    <!-- 修改 -->
    <el-drawer
      v-model="drawer2"
      title="修改领养"
      :direction="direction"
      size="50%"
      :before-close="handleClose2"
    >
      <AddPets @handleDraewr="handleDrawer" :filterPet="filterPet" :key="filterPet._id"></AddPets>
    </el-drawer>
    <!-- 添加 -->
    <el-drawer
      v-model="drawer"
      title="添加领养"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <AddPets @handleDraewr="handleDrawer"></AddPets>
    </el-drawer>
  </div>
</template>
<script setup>
import { getPets, delPet, selectPet } from '@/utils/jia-axios'
import { nextTick, ref, useTemplateRef, watch } from 'vue'
import PetsDialog from '@/components/pets/PetsDialog.vue'
import AddPets from '@/components/pets/AddPets.vue'
import { ElNotification } from 'element-plus'

// 总共多少个分页
const total = ref(0)
// 会话框，展示详情
const dialogTableVisible = ref(false)
const filterPet = ref(false)
const dialogTable = (id) => {
  dialogTableVisible.value = true
  filterPet.value = pets.value.find((item) => item._id == id._id)
  console.log(filterPet.value)
}
// 获取pets列表
const pets = ref(null)
getPets().then((res) => {
  pets.value = res.data.list
  total.value = res.data.total
  console.log(pets.value)
})

// 添加pet
import { ElMessageBox } from 'element-plus'
const drawer = ref(false)
const drawer2 = ref(false)

const direction = ref('rtl')
const handleClose = (done) => {
  ElMessageBox.confirm('帖子还未添加，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const handleDrawer = () => {
  drawer.value = false
  drawer2.value = false
  getPets(current.value).then((res) => {
    pets.value = res.data.list
    total.value = res.data.total
    console.log(total.value)
  })
}

// 修改pet
const handleClose2 = (done) => {
  ElMessageBox.confirm('帖子还未修改，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const updatePet = (id) => {
  drawer2.value = true
  filterPet.value = pets.value.find((item) => item._id == id)
  // console.log(filterPet.value);
}

// 删除
const deletePet = async (id) => {
  await delPet(id)
  getPets().then((res) => {
    pets.value = res.data.list
    total.value = res.data.total
    console.log(total.value)
    ElNotification({
      title: '删除成功',
      message: `成功删除一条数据`,
      type: 'success',
    })
  })
}

// 分页
const current = ref(1)
const handleCurrentChange = (newPage) => {
  current.value = newPage
}
watch(current, (newValue, oldValue) => {
  if (newValue != oldValue) {
    formSubmit(newValue)
  }
})

// 筛选
const select = useTemplateRef('select')
const flag = ref(false)
const handleSelectClose = () => {
  flag.value = !flag.value
  if (flag.value) {
    select.value.style.height = '100rem'
    select.value.style.visibility = 'inherit'
    select.value.style.opacity = '1'
  } else {
    select.value.style.height = '0'
    select.value.style.visibility = 'hidden'
    select.value.style.opacity = '0'
  }
}

const formInline = ref({
  name: '',
  variety: '',
  age: '',
  personality: '',
  health: '',
  address: '',
})

const formSubmit = (page) => {
  const { name, variety, age, personality, health, address } = formInline.value
  selectPet(name, variety, age, personality, health, address, page).then((res) => {
    pets.value = res.data.list
    console.log(res.data)
    total.value = res.data.total
    ElNotification({
      title: '查询成功',
      message: `查询到 ${pets.value.length} 条数据`,
      type: 'success',
    })
  })
}
const buttons = [
  { type: 'primary', text: '添加', method: () => (drawer.value = true) },
  { type: 'primary', text: '筛选', method: handleSelectClose },
]
</script>
<style lang="less" >
@import url(../../css/table.css);
.pagination {
  margin-top: 20rem;
  width: 96%;
  display: flex;
  padding: 0 20rem;
  justify-content: end;
}
</style>